<template>
  <view class="personalHome allColumnCenter">
    <view class="personalHome_background allColumnCenter justify-center" @click.stop="photoPath">
      <image class="family_header_image" mode="widthFix" src="/static/shiqin-images/uploadPhoto.png"></image>
      <view class="family_header_desc allColumnCenter">
        <text class="family_header_desc_text">还未上传全家福</text>
        <text class="family_header_desc_littleText">点击上传</text>
      </view>
    </view>
    <header-title ref="headerTitle" isDisplayBack is-fixed
                  @getPageHeight="getPageHeight" z-index="10"></header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <view :style="{height: `calc(508rpx - ${headerHeight}px)`}"></view>
    <view class="personalHome_secondaryBackground z-1 allColumnCenter">
      <view class="personalHome_infoCard allRowCenter">
        <view class="personalHome_infoCard_all row items-center justify-between">
          <view class="personalHome_infoCard_all_left row items-center" @click.stop="peopleDataPath()">
            <image-avater :src="personalDetails.avatar" :width="128" :height="128"></image-avater>
            <view class="personalHome_infoCard_all_left_info ml-30">
              <view class="personalHome_infoCard_all_left_info_name"
                    v-if="!!personalDetails.username || !!personalDetails.remark">
                <text class="personalHome_infoCard_all_left_info_name_text">
                  {{ personalDetails.username || personalDetails.remark }}
                </text>
              </view>
              <view class="personalHome_infoCard_all_left_info_signature mt-6" v-if="!!personalDetails.autograph">
                <text class="personalHome_infoCard_all_left_info_signature_text">{{ personalDetails.autograph }}</text>
              </view>
              <view class="personalHome_infoCard_all_left_info_signature mt-6" v-else>
                <text class="personalHome_infoCard_all_left_info_signature_text">拾亲 共创美好生活～</text>
              </view>
              <view class="personalHome_infoCard_all_left_info_name_edit row items-center justify-center mt-14">
                <u-icon name="edit-pen" size="21" color="#FFFFFF"></u-icon>
                <text class="personalHome_infoCard_all_left_info_name_edit_text">编辑资料</text>
              </view>
            </view>
          </view>
          <view class="personalHome_infoCard_all_right">
            <image src="/static/shiqin-images/culture.png" class="personalHome_infoCard_all_right_image"></image>
          </view>
        </view>
      </view>
      <!-- 家庭纪念日 -->
      <view class="personalHome_allContent allColumnCenter mt-18">
        <list-header title="个人纪念日" @listHeaderIconClick="addFamilyAnniversary" width="658rpx"
                     @listHeaderAllClick="anniversariesListPath"></list-header>
        <scroll-view class="family_familyAnniversary z-1" :scroll-x="true">
          <view class="family_familyAnniversary_all flex items-center">
            <card-hints v-for="(item,index) in personalDetails.day_list" :key="index" :info="item" :index="index"
                        :length="personalDetails.day_list.length"></card-hints>
          </view>
        </scroll-view>
      </view>
      <view class="personalHome_allContent allColumnCenter mt-18">
        <list-header title="个人圈" @listHeaderIconClick="familyCircleBublish" width="658rpx"
                     @listHeaderAllClick="goFamilyCircleDetails"></list-header>
        <family-circle v-for="(item,index) in propelCircleList" :key="index" :info="item"
                       :border="propelCircleList.length -1 != index"></family-circle>
      </view>
      <bottom-button :title="'发布'" :isFixed="bottomFlag" class="mt-50"
                     @elementClick="goPath"></bottom-button>
      <view style="height: 150rpx"></view>
    </view>


    <!-- 家庭纪念日弹窗 -->
    <first_popup ref="familyAnniversaryPopUp">
      <template>
        <view class="familyAnniversaryPopUp">
          <view class="familyAnniversaryPopUp_list row items-center justify-between"
                v-for="(item,index) in familyAnniversaryType" :key="index"
                @click.stop="jumpAddFamilyAnniversary(index)">
            <text class="familyAnniversaryPopUp_list_text">{{ item.name }}</text>
            <view class="familyAnniversaryPopUp_list_selectLine" v-if="selectFamilyAnniversaryType == index"></view>
            <view class="familyAnniversaryPopUp_list_line" v-else></view>
          </view>
        </view>
      </template>
    </first_popup>
  </view>
</template>

<script>
import HeaderTitle from "../../components/shiqinComponents/pageComponents/headerTitle.vue";
import ImageAvater from "../../components/shiqinComponents/pageComponents/imageAvater.vue";
import CardHints from "../family/components/cardHints.vue";
import ListHeader from "../../components/shiqinComponents/pageComponents/listHeader.vue";
import FamilyCircle from "../family/components/familyCircle.vue";
import First_popup from "../../components/shiqinComponents/shiqin_globalPopUps/first_popup.vue";
import BottomButton from "../../components/shiqinComponents/shiqinButton/bottomButton.vue";
import {getMemberInfo, getMomentsList} from "../../api/shiqinAPI";

export default {
  components: {BottomButton, First_popup, FamilyCircle, ListHeader, CardHints, ImageAvater, HeaderTitle},
  data() {
    return {
      // 头部高度
      headerHeight: 0,
      // 个人纪念日列表
      propelAnniversaryList: [],
      // 个人圈列表
      propelCircleList: [],
      familyAnniversaryType: [
        {
          name: '添加生日'
        },
        {
          name: '添加纪念日'
        }
      ],
      selectFamilyAnniversaryType: -1,

      personalDetails: {},

      // 浮窗按钮的配置
      bottomFlag: false,
      systemInfo: {},
      options: {},
      personalInfo: {
        page: 1,
        pagesize: 10,
        total:0
      }
    };
  },
  async onLoad(options) {
    this.options = options
    await this.getPersonalInfo(this.options.id)
    uni.$on('memberDetail', () => {
      this.getPersonalInfo(this.options.id)
    })
  },
  onReady() {
    this.$nextTick(() => {
      this.systemInfo = uni.getSystemInfoSync()
      this.$refs.headerTitle.getPageHeight()
      this.getBottomButton()
    })
  },
  onReachBottom() {
    if(this.personalInfo.page*this.personalInfo.pagesize < this.personalInfo.total){
      this.personalInfo.page++
      this.getPersonalCircles()
    }
  },
  methods: {
    goPath() {
      this.$nav.navigateTo('/pages/familyCircleDetails/familyCircleRelease', {
        member_id: this.personalDetails.id,
        is_flag: 1
      })
    },
    getBottomButton() {
      const query = uni.createSelectorQuery().in(this)
      query.select('.personalHome').boundingClientRect(data => {
        const rpx = this.systemInfo.windowWidth / 750
        this.bottomFlag = (data.top + data.height) > this.systemInfo.windowHeight - (200 * rpx)
      }).exec()
    },
    getPageHeight(number) {
      this.headerHeight = number
    },
    peopleDataPath() {
      this.$nav.navigateTo('/pages/shiqinUserPage/personalData',{member_id:this.personalDetails.id})
    },
    photoPath() {
      this.$nav.navigateTo('/pages/photo/uploadPhont',{is_flag: 1,member_id:this.personalDetails.id})
    },
    // 添加家庭纪念日
    addFamilyAnniversary() {
      this.$refs.familyAnniversaryPopUp.openPopup({
        title: '请选择',
        maskClick: false,
        isShowConfirm: false
      })
    },
    // 跳转纪念日列表
    anniversariesListPath() {
      this.$nav.navigateTo('/pages/familyAnniversary/anniversariesList')
    },

    // 跳转家庭全详情
    goFamilyCircleDetails() {
      this.$nav.navigateTo('/pages/familyCircleDetails/familyCircleDetails')
    },
    familyCircleBublish() {
      this.$nav.navigateTo('/pages/familyCircleDetails/familyCircleRelease')
    },
    jumpAddFamilyAnniversary(index) {
      this.selectFamilyAnniversaryType = index
      setTimeout(() => {
        switch (index) {
          case 0:
            this.$nav.navigateTo('/pages/familyAnniversary/birthday', {is_flag: 1})
            this.$refs.familyAnniversaryPopUp.closePopup()
            this.selectFamilyAnniversaryType = -1
            return
          case 1:
            this.$nav.navigateTo('/pages/familyAnniversary/anniversary', {
              is_flag: 1,
              member_id: this.personalDetails.id
            })
            this.$refs.familyAnniversaryPopUp.closePopup()
            this.selectFamilyAnniversaryType = -1
            return;
        }
      }, 500)
    },
    // 获取个人详情
    getPersonalInfo(id) {
      getMemberInfo({
        id
      }).then(res => {
        this.personalDetails = res.data.list
        this.getPersonalCircles()
      })
    },
    // 获取个人圈
    async getPersonalCircles() {
      let {data} = await getMomentsList({
        type: 2,
        member_id: this.personalDetails.id,
        page: this.personalInfo.page,
        pagesize: this.personalInfo.pagesize
      })
      data.list.data.forEach(item=>{
        this.propelCircleList.push(item)
      })
      this.personalInfo.total = data.list.total
    }
  },
}
</script>

<style lang="scss">
.personalHome {
  width: 750rpx;
  min-height: 100vh;
  background: $secondaryPages;

  .personalHome_background {
    position: fixed;
    top: 0;
    left: 0;
    width: 750rpx;
    height: 508rpx;
    background: url("https://imgs.699pic.com/images/507/738/651.jpg!list1x.v2");
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .family_header_image {
      width: 83rpx;
      height: 83rpx;
    }

    .family_header_desc {
      .family_header_desc_text {
        font-family: Heiti SC, Heiti SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
      }

      .family_header_desc_littleText {
        font-family: Heiti SC, Heiti SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #FF4208;
      }
    }
  }

  .personalHome_secondaryBackground {
    width: 750rpx;
    min-height: calc(100vh - 508rpx);
    background: $secondaryPages;

    .personalHome_infoCard {
      margin-top: -52rpx;
      width: 702rpx;
      height: 190rpx;
      background: #FFFFFF;
      border-radius: 20rpx 20rpx 20rpx 20rpx;

      .personalHome_infoCard_all {
        margin: 0 25rpx;
        width: 652rpx;

        .personalHome_infoCard_all_left {
          .personalHome_infoCard_all_left_info {
            .personalHome_infoCard_all_left_info_name {
              .personalHome_infoCard_all_left_info_name_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 30rpx;
                color: #000000;
              }
            }

            .personalHome_infoCard_all_left_info_signature {
              .personalHome_infoCard_all_left_info_signature_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #5C5C5C;
              }
            }

            .personalHome_infoCard_all_left_info_name_edit {
              width: 143rpx;
              height: 38rpx;
              background: #FF7950;
              border-radius: 25rpx 25rpx 25rpx 25rpx;

              .personalHome_infoCard_all_left_info_name_edit_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 20rpx;
                color: #FFFFFF;
              }
            }
          }
        }

        .personalHome_infoCard_all_right {
          .personalHome_infoCard_all_right_image {
            width: 117rpx;
            height: 117rpx;
          }
        }
      }
    }

    .personalHome_allContent {
      width: 702rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      overflow: hidden;

      .family_familyAnniversary {
        width: 658rpx;
        overflow: hidden;

        .family_familyAnniversary_all {
          padding: 8rpx 0;
        }
      }
    }


    .family_publish {
      width: 362rpx;
      height: 80rpx;
      background: #FF4206;
      border-radius: 41rpx 41rpx 41rpx 41rpx;

      .family_publish_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
      }
    }
  }

  .familyAnniversaryPopUp {
    width: 496rpx;

    .familyAnniversaryPopUp_list {
      margin: 52rpx 0;

      .familyAnniversaryPopUp_list_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 34rpx;
        color: #000000;
      }

      .familyAnniversaryPopUp_list_line {
        width: 30rpx;
        height: 30rpx;
        border-radius: 36rpx 36rpx 36rpx 36rpx;
        border: 2rpx solid #2F2F2F;
      }

      .familyAnniversaryPopUp_list_selectLine {
        width: 26rpx;
        height: 26rpx;
        border-radius: 13rpx 13rpx 13rpx 13rpx;
        border: 6rpx solid #FF4206;
      }
    }
  }
}
</style>
